<template>
  <div class="claim">
    <van-nav-bar left-text="返回" left-arrow @click-left="backPrePage">
    </van-nav-bar>
    <van-steps :active="active" active-color="#38f" @click-step="stepClick">
      <van-step>填写信息</van-step>
      <van-step>提交材料</van-step>
      <van-step>审核完成</van-step>
    </van-steps>
    <h2>请仔细填写以下信息：</h2>
    <van-field
        required
        readonly
        clickable
        name="picker"
        :value="value"
        label="就诊类型："
        placeholder="点击选择就诊类型"
        @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
      />
    </van-popup>

    <van-field
        required
        readonly
        clickable
        name="picker2"
        :value="value2"
        label="申请人："
        placeholder="点击选择理赔人"
        @click="showPicker2 = true"
    />
    <van-popup v-model="showPicker2" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
      />
    </van-popup>

    <van-field required v-model="tel" type="tel" label="联系电话："/>

    <van-field
        required
        readonly
        clickable
        name="picker3"
        :value="value3"
        label="就诊医院："
        placeholder="点击选择就诊医院"
        @click="showPicker3 = true"
    />
    <van-popup v-model="showPicker3" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns3"
          @confirm="onConfirm3"
          @cancel="showPicker3 = false"
      />
    </van-popup>

    <van-field
        readonly
        clickable
        name="calendar"
        :value="timeValue"
        label="日期选择："
        placeholder="发生事故的时间点"
        @click="showPopFn()"
    />
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()"
                           @cancel="cancelFn()"/>
    </van-popup>
    <van-field
        v-model="message"
        rows="1"
        autosize
        label="病情描述："
        type="textarea"
        placeholder="请简要描述一起啊事故的发生经过、就医时间和产生的相关费用情况"
        maxlength="500"
        show-word-limit
    />

    <h2>理赔收款信息：</h2>
    <van-field
        required
        readonly
        clickable
        name="picker"
        :value="value6"
        label="收款方式："
        placeholder="选择收款方式"
        @click="showPicker6 = true"
    />
    <van-popup v-model="showPicker6" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns6"
          @confirm="onConfirm6"
          @cancel="showPicker6 = false"
      />
    </van-popup>

    <van-field
        required
        readonly
        clickable
        name="picker"
        :value="value4"
        label="持卡人姓名："
        placeholder="选择持卡人"
        @click="showPicker = true"
    />
    <van-field
        v-model="value1"
        label="银行卡号"
        :right-icon="require('@/assets/iconfont/camera.png')"
        placeholder="请输入引号卡号"
        clearable
    />
    <van-button @click="toClaimDataPage(0)" type="info" size="large" class="my-botton">下一步</van-button>
  </div>
</template>

<script>
export default {
  name: "ApplyClaim",
  data() {
    return {
      value1: '6228881269080908180',
      message: '',
      active: 0,
      value: '住院',
      columns: ['住院', '住院2', '住院3'],
      showPicker: false,
      value2: '',
      columns2: ['张三', '李四', '王五'],
      showPicker2: false,
      value3: '北京医院',
      columns3: ['北京医院', '北京医院2', '北京医院3'],
      showPicker3: false,
      value4: '张三',
      tel: '18888888888',
      value6: '银行卡',
      columns6: ['银行卡', '支付宝', '微信'],
      showPicker6: false,
      //日期组件
      currentDate: new Date(),
      changeDate: new Date(),
      show: false, // 用来显示弹出层
      timeValue: '2021年12月20日',
    }
  },
  created() {
    this.value2 = this.$route.query.value
    this.value4 = this.$route.query.value
    this.timeValue = this.$route.query.value2
  },
  methods: {
    toClaimDataPage(index) {
      if (index === 0) {
        this.$router.push({path: '/claim/data', query: {id: index}})
      }
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onConfirm2(value) {
      this.value2 = value;
      this.showPicker2 = false;
    },
    onConfirm3(value) {
      this.value3 = value;
      this.showPicker3 = false;
    },
    onConfirm6(value) {
      this.value6 = value;
      this.showPicker6 = false;
    },
    showPopFn() {
      this.show = true;
    },
    showPopup() {
      this.show = true;
    },
    changeFn() { // 值变化是触发
      this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    confirmFn() { // 确定按钮
      this.timeValue = this.timeFormat(this.currentDate);
      this.show = false;
    },
    cancelFn() {
      this.show = false;
    },
    timeFormat(time) { // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + '年' + month + '月' + day + '日'
    },
    backPrePage() {
      this.$router.go(-1);
    },
    stepClick() {
      if (this.active === 0 || this.active === 1) {
        this.active = this.active + 1
      }
    },
    mounted() {
      this.timeFormat(new Date());
    }
  }
}
</script>

<style lang="less" scoped>
.my-botton {
  height: 50px;
  width: 300px;
  margin-top: 6%;
  margin-bottom: 2%;
  border-radius: 5px;
  margin-left: 35px;
  margin-right: 15px;
}

h2 {
  margin-top: 2%;
  margin-left:  3%;
  margin-bottom:  3%;
  font-size: 18px;
  font-weight: bold;
}

//二端对齐
///deep/ .van-field__label {
//  span {
//    display: inline-block;
//    width: 70px;
//    text-align-last: justify;;
//  }
//}


.my-card {
  margin-left: 18px;
}
</style>
